<template>
	<div>
		<div class="head">
			消息<small v-if="buller"></small>
		</div>
		<main>
			<div v-if="!buller" class="disLogin">
				<p style="text-align: center;padding-top: 30px;">客官先登录再来查看吧</p>
			</div>
			<div v-if="buller&&messages.length<=0" class="disLogin">
				<p style="text-align: center;padding-top: 30px;">您暂时还没有消息</p>
			</div>
			
			<div v-if="buller">
				<ul class="lis">
					<li @click="show" class="active"><span>未读消息</span></li>
					<li @click="show"><span>已读消息</span></li>
				</ul>
				<div class="hasread read desc">
					<ul>
						<li v-for="(item,ins) in messages" v-if="!item.hasRead" :key='ins'>
							<p><img :src="'http://localhost:2200'+item.send_id.avatar"/><span>{{item.send_id.nickName}}</span><span @click="hasRead($event,item._id)">确认已读</span></p>
							<p>{{item.content}}</p>
							<p><span>{{item.create_time | date}}</span><span @click="remove($event,item._id)"><i class="fa fa-trash"></i></span></p>
						</li>
					</ul>
				</div>
				<div style="display: none;" class="disread read desc">
					<ul>
						<li v-for="(item,ins) in messages" v-if="item.hasRead" :key='ins'>
							<p><img :src="'http://localhost:2200'+item.send_id.avatar"/><span>{{item.send_id.nickName}}</span></p>
							<p>{{item.content}}</p>
							<p><span>{{item.create_time | date}}</span><span @click="remove($event,item._id)"><i class="fa fa-trash"></i></span></p>
						</li>
					</ul>
				</div>
			</div>
			
		</main>
	</div>
</template>

<script>
	import $ from 'jquery'
	import axios from 'axios'
	export default {
		data:function(){
			return {
				buller:null,
				disRead:0,
				messages:[],
				has:false,
				text1:'加载中',
				page:1,
				
			}
		},
		filters:{
			date(value) {
				value = new Date(value);
				return value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate()+' '+value.getHours()+':'+value.getMinutes()+':'+value.getSeconds();
			},
		},
		methods:{
			hasRead(ev,id){
				axios.get('buller/readMsg?id='+id).then((result)=>{
					this.messages = result.data.messages;
				}).catch((err)=>{
					console.log(err);
				})
			},
			remove(ev,id){
				
				axios.get('buller/removeMsg?id='+id).then((result)=>{
					this.messages = result.data.messages;
				}).catch((err)=>{
					console.log(err);
				})
			},
			show(ev){
				$(ev.currentTarget).addClass('active').siblings().removeClass('active');
				var ins = $(ev.currentTarget).index();
				$('div.read').eq(ins).css('display','block').siblings('.read').css('display','none');
				
				
			}
		},
		mounted(){
			axios.get('/buller/checkLogin').then((result) => {

				this.buller = result.data.data;

			}).catch((err) => {
				console.log(err);
			})
			
			axios.get('/buller/getMsgs').then((result) => {

				this.messages = result.data.messages;

			}).catch((err) => {
				console.log(err);
			})
			
			
			
			
			
		}
	}
	
</script>

<style scoped>
	.lis{
		overflow: hidden;
		margin-bottom: 10px;
	}
	.lis li{
		float: left;
		width: 50%;
		text-align: center;
		background: #EEEEEE;
		padding: 0 50px;
		cursor: pointer;
		
	}
	.lis li span{
		display: inline-block;
		font-size: 13px;
		color: #444444;
		padding-bottom: 3px;
		border-bottom: solid 2px #EEEEEE;
	}
	.lis li.active span{
		border-bottom-color: orangered;
	}
	
	.desc>ul>li{
		border-bottom:  solid 1px ghostwhite;
	}
	.desc ul li p{
		line-height: 18px;
		padding: 0 10px;
	}
	.desc ul li div{
		padding: 0 10px;
	}
	.desc ul li p:first-child{
		position: relative;
	}
	.desc ul li p:first-child img{
		width: 50px;
		height:50px;
		border-radius: 50%;
	}
	.desc ul li p:first-child span:nth-child(2){
		position: relative;
		top: -18px;
		left:5px;
		
	}
	.desc ul li p:first-child span:nth-child(3){
		position: absolute;
		cursor: pointer;
		top: 20px;
		right: 25px;
		font-size: 11px;
		color: orange;
		border: solid 1px orange;
		padding: 0 3px;
		border-radius: 7%;
	}
	.desc ul li p:nth-child(2){
		color: #555;
		font-size: 14px;
	}
	.desc ul li p:nth-child(3) span{
		color: #bbb;
		font-size: 10px;
	}
	.desc ul li p:nth-child(3) span:last-child{
		float: right;
		font-size: 18px;
		color: #999;
		margin-right: 20px;
		cursor: pointer;
	}
	.head {
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		text-align: center;
		color: white;
		font-size: 15px;
		line-height: 35px;
		background: linear-gradient(to right, #FF7706 40%, #FF4400 90%);
	}
	.disLogin{
		height: 100vh;
		padding:48px 0;
	}
	main{
		padding: 50px 0;
		padding-top: 37px;
	}
</style>